import { PageContainer } from '@ant-design/pro-components';
import React, {useEffect, useState} from 'react';
import {Button, Card, Form, Input, message,  Space} from "antd";
import {
  getInterfaceInfoByIdUsingGet, invokeInterfaceInfoUsingPost,
} from "@/services/xingxiang_backed/interfaceInfoController";
import {useParams} from "react-router";
import Descriptions from 'antd/lib/descriptions';
import {layout} from "@/app";

const Index: React.FC = () => {
  const [loading, setLoading] = useState(false);
  const [invokeLoading, setInvokeLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo>();
  const [invokeRes, setInvokeRes] = useState<any>();
  const params =useParams();
  const [form] = Form.useForm();
  const  loadData = async () =>{
    if(!params.id){
      message.error("参数不存在");
      return ;
    }
    setLoading(true);
    try {
      const res  = await getInterfaceInfoByIdUsingGet({
        id: Number(params.id)
      })
      setData(res.data);
    } catch (error: any){
        message.error('请求失败'+ error.message);
      }
      setLoading(false);
  }
  useEffect(() =>{
    loadData();
  },[])

  const onReset = () => {
    form.resetFields();
  };

  const onFinish =async (values: any) => {
    const hide = message.loading('测试中');
    if(!params.id){
      message.error("接口不存在");
      return ;
    }
    setInvokeLoading(true);
    try {
    const res=  await invokeInterfaceInfoUsingPost({
        id: params.id,
        ...values
      })
      setInvokeRes(res.data);
      hide();
      message.success('测试成功');
      setInvokeLoading(false);
      return true;
    }catch  (error: any) {
      hide();
      message.error('测试失败!'+error.message);
      return false;
    }
  };


  return (
    <PageContainer title="查看接口文档">
     <Card>
       { data ?  (<Descriptions title={data.name} column={1}>
         <Descriptions.Item label="描述">{data.description}</Descriptions.Item>
         <Descriptions.Item label="接口状态">{data.status ? '正常' : '关闭'}</Descriptions.Item>
         <Descriptions.Item label="请求地址">{data.url}</Descriptions.Item>
         <Descriptions.Item label="请求参数">{data.requestParams}</Descriptions.Item>
         <Descriptions.Item label="请求方法">{data.method}</Descriptions.Item>
         <Descriptions.Item label="请求头">{data.requestHeader}</Descriptions.Item>
         <Descriptions.Item label="响应头">{data.responseHeader}</Descriptions.Item>
         <Descriptions.Item label="更新时间">
           {data.updateTime}
         </Descriptions.Item>
         <Descriptions.Item label="创建时间">
           {data.createTime}
         </Descriptions.Item>
       </Descriptions>) : (<>接口不存在</>)}
     </Card>

      <Card>
          <Form
            {...layout}
            form={form}
            name="control-hooks"
            onFinish={onFinish}
            style={{ maxWidth: 600 }}
          >

            <Form.Item name="userRequestParams" label="请求参数">
              <Input.TextArea/>
            </Form.Item>
              <Space>
                <Button type="primary" htmlType="submit">
                  调用
                </Button>
                <Button htmlType="button" onClick={onReset}>
                  重置
                </Button>
              </Space>
          </Form>
      </Card>
      <Card loading={invokeLoading}>
        {invokeRes}
      </Card>

    </PageContainer>
  );
};

export default Index;
